<template>
    <modal
        v-bind="modalProps"
        @confirm="confirm"
        @cancel="cancel"
        @done="$emit('done', lastRes)"
    >
        <template>
            <file-upload
              v-show="false"
              :post-action="null"
              extensions="gif,jpg,jpeg,png,webp"
              accept="image/png,image/gif,image/jpeg,image/webp"
              :multiple="false"
              :directory="false"
              :thread="1"
              :drop="!isLoading"
              :drop-directory="false"
              v-model="files"
              input-id="search-img-file"
              @input-file="inputFile"
              @input-filter="inputFilter"
              ref="upload">
              <i class="material-icons">image</i>
            </file-upload>

            <div style="width: 300px; height: 300px; margin: 10px auto; text-align: center; line-height: 300px;">
                <label for="search-img-file" class="btn d-inline-block" v-if="!image" style="width: 150px; height: 150px; line-height: 150px; text-align: center; font-size: 30px; border: 1px dashed gray; border-radius: 8px;">
                    +
                </label>
                <img :src="imageSrc" class="img-thumbnail mw-100 mh-100" v-if="imageSrc">
            </div>
            
        </template>
        <template slot="footer-left">
            
            <label class="btn btn-sm btn-primary m-1" for="search-img-file" v-if="isSendValid">
                选择文件    
            </label>

        </template>
    </modal>
</template>
<script type="text/javascript">

import ajaxModal from '../plugin/ajaxModal'
import {defaultModal as modal} from '../plugin/ajaxModal'
import FileUpload from 'vue-upload-component'

import $ from 'jquery'
import Vue from 'vue'

var constant = {
    
}

export default {
    props: {
        parentId: {
            required: true,
            type: String
        }
    },
    mixins: [ajaxModal],
    components: {modal, FileUpload},
    data() {
        return {
            files: [],
            hasFile: true
        }
    },
    computed: {
        isSendValid() {
            return !this.isLoading && this.image;
        },
        image() {
            return this.files[0] ? this.files[0].file : null;
        },
        imageSrc() {
            var vm = this;
            return vm.image ? vm.createURL(vm.image)  : null;
        }
    },
    methods: {
        createURL(blob) {
            return URL && URL.createObjectURL ? URL.createObjectURL(blob) : null;
        },
        removeURL(url) {
            URL && URL.revokeObjectURL && URL.revokeObjectURL(url);
        },
        getParams() {
            var vm = this, data = new FormData();
            data.append('file', vm.image);
            data.append('_id', vm.parentId);
            return data;
        },
        inputFilter(newFile, oldFile) {
            if (newFile && !oldFile) {
                // Before adding a file
                // 添加文件前
                // Filter system files or hide files
                // 过滤系统文件 和隐藏文件
                // console.log('here');
                if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
                  return prevent()
                }
                // Filter php html js file
                // 过滤 php html js 文件
                if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
                  return prevent()
                }

                if (!/^image/i.test(newFile.type)) {
                  return prevent()
                }
              }
        },
        inputFile(newFile, oldFile) {
            var vm = this;
            if (newFile && !oldFile) {

            }
            if (newFile && oldFile) {
                // 更新文件


                // 开始上传
                if (newFile.active !== oldFile.active) {
                  // console.log('Start upload', newFile.active, newFile);
                }

                // 上传进度
                if (newFile.progress !== oldFile.progress) {
                  
                }

                // 上传错误
                if (newFile.error !== oldFile.error) {
                  
                }

                // 上传成功
                if (newFile.success !== oldFile.success) {
                  vm.successCount++;
                }
            }
        }
    },
    watch: {
        imageSrc(nv, ov) {
            if (ov) {
                this.removeURL(ov);
            }
        }
    },
    created() {
        
    },
    destroyed() {
        var vm = this;
        if (vm.imageSrc) {
            vm.removeURL(vm.imageSrc);
        }
    }
}
</script>
<style type="text/css" scoped>
    
</style>